<template>
	<div class="loading-container">
		<div class="img">
			<img src="@/assets/loading.gif" :alt="tips" />
		</div>
		<span>{{ tips }}</span>
	</div>
</template>

<script>
export default {
	props: {
		tips: {
			type: String,
			default: "loading...",
		},
	},
	created() {
		// 监听this.$store.getters["loginUser/status"]的变化，返回一个函数，调用返回的函数即可销毁该监听函数
		this.unWatch = this.$store.watch(
			() => this.$store.getters["loginUser/status"],
			(newVal) => {
				if (newVal !== "loading") {
					this.$router
						.push({ name: this.$route.query.fromName })
						.catch(() => {});
				}
			},
			{ immediate: true }
		);
	},
	beforeDestroy() {
		// 销毁监听函数
		this.unWatch();
	},
};
</script>

<style scoped lang="less">
.loading-container {
	text-align: center;
	font-size: 20px;
	.img {
		img {
			width: 400px;
		}
	}
}
</style>
